<template>
	<div id="loginlist">
		<div class="table">
			<div class="container">
				<div class="handle-box">
					<div class="handle-box">
						<el-select v-model="searchcondition.deviceType" placeholder="设备类型" @change="changeType()">
							<el-option v-for="(value,key) in $store.state.device_type" :key="key" :label="value" :value="key">
							</el-option>
						</el-select>
						<el-date-picker v-model="searchcondition.operateTime" type="date" placeholder="操作日期">
						</el-date-picker>
						<el-input v-model="searchcondition.userName" placeholder="操作人姓名" class="handle-input mr10"></el-input>
						<el-input v-model="searchcondition.operateName" placeholder="操作标题" class="handle-input mr10"></el-input>
						<el-button type="primary" icon="search" @click="search">搜索</el-button>
					</div>
				</div>

				<el-table :data="tableData" border ref="multipleTable" v-loading="loading">
					<el-table-column label="操作人头像" width="100">
						<template slot-scope="scope">
							<div class="portrait">
								<img :src="scope.row.icon ? (globaldata.imgBaseUrl+scope.row.icon) : portrait" />
							</div>

						</template>
					</el-table-column>
					<el-table-column prop="userName" width="200" label="操作人姓名"></el-table-column>
					<el-table-column prop="operateName" width="400" label="操作标题"></el-table-column>
					<el-table-column prop="operateContent" label="操作内容"></el-table-column>
					<el-table-column prop="deviceType_s" width="150" label="设备类型"></el-table-column>
					<el-table-column prop="operateTime" width="150" label="操作日期"></el-table-column>

				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';

	import service from '../../../../js/common/operationlogservice.js';
	export default {
		data() {
			return {
				portrait: require('@/assets/portrait.png'), //默认头像
				searchcondition: {
					pageNum: 1,
					pageSize: 10,
					deviceType: '',
					operateName: '',
					userName: '',
					operateTime: ''

				},
				tableData: [],
				total: 0,
				loading: false,			
			}
		},
		mounted() {
			let param_arr = ['device_type']
			this.tool.getDirByKey(this, param_arr)
				.then(() => {
					console.log(this.$store.state);
					service.getPageData(this);
				})
		},
		computed: {

		},
		methods: {
			changeType() {
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			search() {
				var self = this;
				var loginDate = self.searchcondition.operateTime;
				self.searchcondition.operateTime = self.formattool.formDateYear(Date.parse(new Date(loginDate)));
				self.searchcondition.pageNum = 1;
				service.getPageData(this);
			},

			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.pageSize = val;
				service.getPageData(this);
			}
		}
	}
</script>

<style lang="less">
	#loginlist {
		.el-table {
			table-layout: fixed;
			.cell {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap !important;
				word-break: keep-all !important;
			}
		}
	}
</style>